<template>
  <div class="root">
    <p class="ps">ps: 有一部分弹窗icon由于和UI库冲突了无法显示 , 一部分自带样式是源自于原来的移动端项目所以会出现一些样式重排</p>
    <div class="buttons">
      <Button type="primary" @click="openWindow(1)">弹层1</Button>
      <Button type="primary" @click="openWindow(2)">弹层2</Button>
      <Button type="primary" @click="openWindow(3)">弹层3</Button>
      <Button type="primary" @click="openWindow(4)">弹层4</Button>
      <Button @click="loadshow(1)">loading1</Button>
      <Button @click="loadshow(2)">loading2</Button>
      <Button v-for="i in 14" :key="i" @click="show(i)">{{ i }}</Button>
    </div>
    <popup :popupData="popupData" @close="close" :popupClickLeft="popupClickLeft" :popupClickRight="popupClickRight">
      <div slot="customize" class="customize" v-if="popupData.contents" v-html="popupData.contents"></div>
      <div slot="popupCustomize" class="contentImg popup-customize show" v-if="popupData.contentImg">
        <div class="c-title">恭喜获得新人奖励</div>
        <div class="c-money"><span>0.60</span>元</div>
        <div class="c-content">接下来带你进入<br/>新人专享任务赚更多</div>
        <div class="popup-btn">
          <button class="btn-left c-bg" @click="popupCustomize">前往新人专享活动</button>
        </div>
        <div class="popup-icon-close" v-if="!popupData.closeShow" @click="close"></div>
      </div>
    </popup>
    <popwindow :popwindow="popwindowData"></popwindow>
    <loading ref="loadchild" :loadData="loadData"></loading>
    <message-ball ref="messageBall" :ballData="ballData" :ballShow="ballShow"></message-ball>
  </div>
</template>

<script>
  import Popup from '@c/popup.vue';
  import MessageBall from '@c/message-ball.vue';
  import loading from '@c/loading.vue';
  import popwindow from '@c/popwindow.vue'
  export default {
    components: {
      popwindow,
      Popup,
      MessageBall,
      loading
    },
    
    data() {
      return {
        imgcode: '',
        bgimg: 'https://resource.youyizhuan.cn/Resource/Uploads/Images/public/8237181573110683.png',
        qrcodeimg: '',
        popupData: {},
        ballData: [
          {"id":67,
          "content":"距离提现仅差1步~使用【首充卡】额外赚2元，快速达到提现要求！",
          "btn_text":"使用",
          "btn_url":"\/vip\/vipcard",
          "icon":"https:\/\/resource.youyizhuan.cn\/Resource\/Uploads\/Images\/msg\/67\/6516351577171711.png",
          "is_read":1,"isClick":0},
        ],
        ballShow: true,
        loadData: 0,
        invite_code: '',
        popwindowData: {
          show: 0
        },
      };
    },
    
    created() {
    },
    
    mounted() {
      
    },

    methods: {
      loadshow(num) {
        this.loadData = num;
        setTimeout(() => {
          this.$refs.loadchild.show();
        },100)
      },
      pop (num) {
        this.windowdata.show = num;
      },
      show(i) {
        switch (i) {
          case 1:
            this.popupData = {
              popupShow: true,
              type: 0, // 0错误  1正确 2金钱 3感叹号 4收藏 5vip 6二维码 7微信 8通知 9分享 10邀请方式 11头像
              title: '绑定失败',
              // content:'发送上方内容给微信好友<br/>好友点击该链接即可加入游易赚',
              // txtColor: '#333333',
              // bgContentUpTxt: 'QQ：1635154114',
              // bgContent: '下载试玩App就能赚钱，玩得越多赚得越多。嘘...这个秘密我只告诉你！<br/>http://1.okzhuan6.com/invite/weixin/20000425',
              content: '当前手机号已绑定以下用户<br/>ID：20052012（K歌之王）',
              // content:{money: 50, content:'每日签到',unit: '元'},
              // imgSrc: '//resource.youyizhuan.cn/Resource/app/image/default/pop_icon_share.png',
              btnTextLeft: '确定'
              // closeShow: true ,
              // btnTextRight: '查看已收藏'
            };
            break;
          case 2:
            this.popupData = {
              popupShow: true,
              type: 1, // 0错误  1正确 2金钱 3感叹号 4收藏 5vip 6二维码 7微信 8通知 9分享 10邀请方式 11头像
              title: '成功',
              content: '已提现50元到游易赚账号',
              btnTextLeft: '确定'
            };
            break;
          case 3:
            this.popupData = {
              popupShow: true,
              type: 2, // 0错误  1正确 2金钱 3感叹号 4收藏 5vip 6二维码 7微信 8通知 9分享 10邀请方式 11头像
              title: '拆了一个红包',
              content:{money: 0.66, content:'获得奖励',unit: '元'},
              btnTextLeft: '确定'
            };
            break;
          case 4:
            this.popupData = {
              popupShow: true,
              type: 3, // 0错误  1正确 2金钱 3感叹号 4收藏 5vip 6二维码 7微信 8通知 9分享 10邀请方式 11头像
              title: '未达到升级条件',
              content: '通过新人引导完成1个任务<br/>才能升级VIP哦',
              btnTextLeft: '去完成'
            };
            break;
          case 5:
            this.popupData = {
              popupShow: true,
              type: 4, // 0错误  1正确 2金钱 3感叹号 4收藏 5vip 6二维码 7微信 8通知 9分享 10邀请方式 11头像
              title: '收藏成功',
              content: '收藏的游戏，可通过【已收藏】<br/>快速找到',
              btnTextLeft: '不再提醒',
              btnTextRight: '查看已收藏',
            };
            break;
          case 6:
            this.popupData = {
              popupShow: true,
              type: 5, // 0错误  1正确 2金钱 3感叹号 4收藏 5vip 6二维码 7微信 8通知 9分享 10邀请方式 11头像
              title: '恭喜成为 普通VIP，获得',
              content: '赢金卡*1     首充卡*1    红包卡*1<br/>使用功能卡做任务，赚得更多',
              btnTextLeft: '查看VIP功能卡',
            };
            break;
          case 7:
            this.popupData = {
              popupShow: true,
              type: 6, // 0错误  1正确 2金钱 3感叹号 4收藏 5vip 6二维码 7微信 8通知 9分享 10邀请方式 11头像
              title: '',
              content: '加入游易赚，每天赚点零花钱<br/>点击下方按钮保存至相册',
              btnTextLeft: '保存至相册',
            };
            break;
          case 8:
            this.popupData = {
              popupShow: true,
              type: 7, // 0错误  1正确 2金钱 3感叹号 4收藏 5vip 6二维码 7微信 8通知 9分享 10邀请方式 11头像
              title: '',
              bgContent: '下载试玩App就能赚钱，玩得越多赚得越多。嘘...这个秘密我只告诉你！<br/>http://1.okzhuan6.com/invite/weixin/20000425',
              content: '发送上方内容给微信好友<br/>好友点击该链接即可加入游易赚',
              btnTextLeft: '保存至相册',
            };
            break;
          case 9:
            this.popupData = {
              popupShow: true,
              type: 8, // 0错误  1正确 2金钱 3感叹号 4收藏 5vip 6二维码 7微信 8通知 9分享 10邀请方式 11头像
              title: '',
              bgContent: '下载试玩App就能赚钱，玩得越多赚得越多。嘘...这个秘密我只告诉你！<br/>http://1.okzhuan6.com/invite/weixin/20000425',
              btnTextLeft: '复制并发送给好友',
            };
            break;
          case 10:
            this.popupData = {
              popupShow: true,
              type: 9, // 0错误  1正确 2金钱 3感叹号 4收藏 5vip 6二维码 7微信 8通知 9分享 10邀请方式 11头像
              title: '',
              bgContent: '下载试玩App就能赚钱，玩得越多赚得越多。嘘...这个秘密我只告诉你！http://1.okzhuan6.com/invite/weixin/20000425',
              content: '发送上方内容给微信好友<br/>好友点击该链接即可加入游易赚',
              btnTextLeft: '复制链接',
            };
            break;
          case 11:
            this.popupData = {
              popupShow: true,
              type: 10, // 0错误  1正确 2金钱 3感叹号 4收藏 5vip 6二维码 7微信 8通知 9分享 10邀请方式 11头像
              title: '',
              bgContentUpTxt: '选择合适的方式<br/>邀请好友玩游戏轻松赚钱',
              imgSrc: '//resource.youyizhuan.cn/Resource/app/image/default/pop_icon_share.png',
            };
            break;
          case 12:
            this.popupData = {
              popupShow: true,
              type: 11, // 0错误  1正确 2金钱 3感叹号 4收藏 5vip 6二维码 7微信 8通知 9分享 10邀请方式 11头像
              title: '游易赚客服',
              bgContentUpTxt: 'QQ：1635154114',
              bgContent: '工作日9:00-18:00，节假日请留言咨询格式「ID:2655757+详细疑问」',
              imgSrc: '//resource.youyizhuan.cn/Resource/app/image/default/pop_icon_share.png',
              btnTextLeft: '立即联系客服',
            };
            break;
          case 13:
            this.popupData = {
              popupShow: true,
              type: -1, // 0错误  1正确 2金钱 3感叹号 4收藏 5vip 6二维码 7微信 8通知 9分享 10邀请方式 11头像
              title: '任务小贴士',
              contents: '1.新手7天可签到领取奖励<br/>2.“千人抢红包”可100%获得0.2元、0.5元、1元微信红包<br/>3.绑定手机帐号可获得1万金币，每天低保赠送6000金币<br/>4.体验游戏还可兑换1元，5元，50元等微信红包，更有话费,苹果手机等你拿',
              btnTextLeft: '复制链接',
              btnTextRight: '查看已收藏',
            };
            break;
          case 14:
            this.popupData = {
              popupShow: true,
              type: -1, // 0错误  1正确 2金钱 3感叹号 4收藏 5vip 6二维码 7微信 8通知 9分享 10邀请方式 11头像
              popupDiv: true,
              contentImg: {
                money: 0.60,
                unit: '元',
                txt: '接下来带你进入<br/>新人专享任务赚更多',
                btnTxt: '前往新人专享活动'
              },
            };
            break;
          default:
            break;
        }
      },
      popupClickLeft() {
        this.popupData.popupShow = false;
      },
      popupClickRight() {
        this.popupData.popupShow = false;
      },
      close() {
        this.popupData.popupShow = false;
      },
      openWindow(num) {
        if (num == 1) {
          this.popwindowData.show = 1;
        } else if (num == 2) {
          this.popwindowData.show = 2;
        } else if (num == 3) {
          this.popwindowData.show = 3;
        } else if (num == 4) {
          this.popwindowData.show = 4;
        }
      },
      popupCustomize() {
        
      }
    }
  };
</script>

<style lang="less" scoped>
  @import '~@/less/mix.less';
  .ps {
    margin: 20px 30px;
    font-size: 16px;
  }
  .buttons {
    margin: 0 auto;
    width: 500px;
    padding: 50px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
  }
  button {
    margin: 20px 10px;
  }
  .customize {
    text-align: left;
    margin: 0 19px;
    margin-top: 15px;
    font-size: 13px;
  }
  .contentImg {
    width: 335px;
    height: 310px;
    // .bgSrc('//resource.youyizhuan.cn/Resource/app/image/home/pop_new.png', 100%);
    .c-title {
      color: #FF632A;
      font-size: 14px;
      margin-top: 34px;
    }
    .c-money {
      color: #FF632A;
      font-size: 14px;
      span {
        font-size: 28px;
      }
    }
    .c-content {
      font-size: 14px;
      color: #FFFFFF;
      margin-top: 74px;
      text-align: center;
      padding-bottom: 24px;
    }
    .c-bg {
      background: #FFF12A !important;
      color: #FF632A;
      font-size: 14px;
    }
  }
  .ball {
    position: relative;
    margin-top: -18px;
    height: 66px;
    z-index: 2;
    .bgSrc('../assets/image/menu/ball_bg.png');
    i {
      position: absolute;
      top: 4px;
      left: 0;
      height: 48px;
    }
  }
   
  .list-enter-active, .list-leave-active {
    transition: all 1s;
  }
  .list-enter
  /* .list-leave-active for below version 2.1.8 */ {
    opacity: 0;
    transform: translateY(30px);
    background: red;
  }
</style>
